<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>x:{{x}}</p>
        <p>y:{{y}}</p>
        <p>count:{{count}}<button @click="increase">increase</button></p>
    </div>
</body>
<script type="module">
    import { createApp, reactive, onMounted, onUnmounted, toRefs,ref } from '../node_modules/vue/dist/vue.esm-browser.js'

    const useMousePosition = ()=>{
        const position = reactive({
                    x: 0,
                    y: 0
            })
            const update = e =>{
                position.x =  e.pageX 
                position.y = e.pageY
            }
            onMounted(() => {
                window.addEventListener('mousemove',update)
            })
            onUnmounted(() => {
             window.removeEventListener('mousemove',update)   
            })
            return toRefs(position)
    }
    function useCount(){
        const count = ref(0)
        return {
            count,
            increase(){
                count.value++
            }
        }
    }
    const app = createApp({
        setup(props, ctx) {
           const {x ,y} = useMousePosition()
           const {count} = useCount()
           console.log(x,y)
            return {
                x,
                y,
                ...useCount()
            }
        }
    })
    console.log(app)
    app.mount('#app')
</script>

</html>